<template>
	<div>
		<a-layout class="salemarket-area">
			<a-layout-content>
				<div class="title">区域管理</div>
				<a-page-header>
					<template v-slot:title>
						<!-- <span class="title">区域管理</span> -->
						<a-button type="primary" @click="back" class="back">
							<span class="iconfont icon-fanhui3"></span>
							返回
						</a-button>
					</template>
					<template slot="extra">
						<a-button @click="getData()" class="reload">
							<!-- <a-icon type="reload" /> -->
							<span class="iconfont icon-shuaxin"></span>
						</a-button>
						<a-button type="primary" @click="addArea" v-has="'area.create'">
							<!-- <a-icon type="file-add" /> -->
							<span class="iconfont icon-jiajianzujianjiahao"></span>
							添加
						</a-button>
					</template>
				</a-page-header>

				<div style="margin: 10px 16px 0 16px">
					<a-table
						:style="{
							width: `100%`,
						}"
						
						:columns="columns"
						:data-source="data"
						bordered
						@change="handleTableChange"
						:loading="loading"
						:pagination="pagination"
						:rowKey="
							(record, index) => {
								return index
							}
						"
					>
						<!-- 自定义单元格列的内容 -->
						<template slot="in_cps" slot-scope="text, record">
							<span v-if="record.in_cps">
								{{ arrToStr(record.in_cps) }}
							</span>
						</template>

						<span slot="action" slot-scope="text, record">
							<template>
								<a
									@click="deleteArea(record)"
									class="action-item"
									v-has="'area.delete'"
								>
									<!-- <span class="iconfont icon-shanchu"></span> -->
									删除</a
								>
								<a
									@click="updateArea(record)"
									class="action-item"
									v-has="'area.update'"
								>
									<!-- <span class="iconfont icon-bianji"></span> -->
									编辑</a
								>
							</template>
						</span>
					</a-table>
				</div>
			</a-layout-content>
		</a-layout>

		<handle-table
			ref="handleTable"
			@handleOk="handleTableChange"
		></handle-table>
	</div>
</template>

<script>
	const tableObj = require("./json/table.json")
	import areaHttp from "@/api/area"
	import handleTable from "./handleForm.vue"
	export default {
		data() {
			return {
				data: [],
				columns: tableObj.columns,
				loading: false,

				pagination: {
					current: 1,
					pageSize: 20,
					total: 0,
					totalPage: 0,
					showQuickJumper: true,
					showSizeChanger: true,
					showTotal: (total) => `共 ${total} 条`,
				},
				queryForm: {
					market_id: this.$route.params.id,
				},
			}
		},
		created() {
			setTimeout(() => {
				this.getData()
			}, 80)
		},
		mounted() {
			// this.getData()
		},
		components: {
			handleTable,
		},
		methods: {
			// calcTableWidth(columns) {
			// 	let totalWidth = 0
			// 	for (let i = 0, len = columns.length; i < len; i++) {
			// 		if (columns[i].width) {
			// 			totalWidth += columns[i].width
			// 		} else {
			// 			totalWidth += 120
			// 		}
			// 	}
			// 	return totalWidth
			// },
			arrToStr(arr = []) {
				console.log(arr)

				if (!arr) {
					return
				}
				let str = ""
				for (let i = 0, len = arr.length; i < len; i++) {
					if (arr[i]["name"]) {
						str += arr[i]["name"] + ", "
					}
				}
				return str.slice(0, str.length - 2)
			},
			handleTableChange(pagination, filters, sorter) {
				console.log(pagination, filters, sorter)
				if (sorter) {
					if (sorter.order) {
						Object.assign(this.queryForm, {
							order_by: `${sorter.columnKey} ${sorter.order.slice(0, -3)}`,
						})
					} else {
						delete this.queryForm.order_by
					}
				}
				this.pagination = pagination || this.pagination
				this.getData()
			},
			getData() {
				this.loading = true
				let pageMap = {
					page: this.pagination.current,
					pageSize: this.pagination.pageSize,
				}
				areaHttp
					.query(Object.assign(pageMap, this.queryForm))
					.then((res) => {
						console.log("区域数据", res)
						this.loading = false
						if (res.code == 1) {
							this.pagination.total = res.page.totalSize
							this.pagination.totalPage = res.page.totalPage
							this.data = res.data
							console.log(this.data)
						}
					})
					.catch((e) => {
						this.loading = false
					})
			},
			deleteArea({ id }) {
				this.$modal.confirm({
					title: "提示",
					content: "确定删除吗？",
					okText: "确定",
					cancelText: "取消",
					centered: true,
					onOk: () => {
						areaHttp.delete(id).then((response) => {
							if (response.code !== 1) {
								this.$message.error(response.message)
								return
							}
							this.$message.success(response.message)
							// this.queryForm()
							this.getData()
							return
						})
						// .catch((err) => {
						// 	console.log(err)
						// })
					},
					onCancel: () => {
						this.$message.warning("删除取消了")
					},
				})
			},
			updateArea(item) {
				this.$refs.handleTable.showModal("update", item)
			},
			addArea() {
				this.$refs.handleTable.showModal("add")
			},
			back() {
				// this.$emit("handleTableStatus")
				this.$router.back()
			},
		},
	}
</script>

<style lang='less' scoped>
	.salemarket-area {
		padding: 15px;
		.icon-fanhui3 {
			font-size: 15px;
			vertical-align: top;
			cursor: pointer;
		}
	}
	.title {
		margin: 10px 0 0 24px;
		display: block;
		margin-bottom: 0;
		padding-right: 12px;
		color: #333333;
		font-weight: 600;
		font-size: 20px;
		line-height: 32px;
	}
	.action-item {
		margin-right: 20px;
		&:last-child {
			margin-right: 0px;
		}
	}
	.reload {
		border-radius: 16px;
		width: 32px;
		padding: 0;
		margin-right: 10px;
	}
	.icon-jiajianzujianjiahao {
		margin-right: 20px;
	}
	.back {
		background-color: #999;
		border: #999;
		&:hover {
			background-color: #999;
			border: #999;
		}
	}
	/deep/.ant-table-row {
		background: #f0f2f5;
	}
</style>
